<template>
  <div>
    <div>PointEchart</div>
    <div class="mapContainer" id="mapContainer" ref="mapContainerRef"></div>
    <div class="showBox" id="showBox" v-if="showRef">弹窗内容</div>
  </div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
import "echarts-gl";
import "echarts-liquidfill";
import { onMounted, ref } from "vue";
import useEchartMapOption from "./use-echart-map-option";

const mapContainerRef = ref(null);
const showRef = ref(false)
let myChart;
const mapName = "guangzhou";

const getMapData = async (mapName) => {
  const response = await fetch(`./public/data/${mapName}.geojson`); // 请将'china.json'替换为实际的地图数据文件路径
  return await response.json();
};

const init = async () => {
  myChart = echarts.init(mapContainerRef.value);
  const { getOption } = useEchartMapOption(mapName);
  const option = getOption();
  const chinaGeoJson = await getMapData(mapName);
  echarts.registerMap(mapName, chinaGeoJson); // 注册可用地图，名称需要一致
  echarts.registerMap('polygonLayer', "[]");
  myChart.setOption(option);
  clickFn();
  setSameContent()
};

const setSameContent = () => {
  //因为地图阴影是geo，地图色块区域是series，拖拽和放缩会造成不同步，要设置到同步
  let lastZoom = 1 // 初始缩放比例
  let lastCenter = [0, 0] // 初始中心点
  myChart.on('georoam', (params: any) => {
    // console.log("params", params);

    // let myOption: any = myChart!.getOption()
    // // console.log("myOption",myOption);

    // if (params.zoom != null) {
    //   //捕捉到缩放时
    //   console.log("捕捉到缩放时");

    //   myOption.geo.zoom = lastZoom = params.zoom
    //   myOption.geo.center = lastCenter = params.origin
    // } else {
    //   //捕捉到拖曳时
    //   console.log("捕捉到拖曳时");
    //   let newCenter = [
    //     lastCenter[0] - params.dx / 2 / lastZoom, // 根据拖拽位移和缩放比例计算新的中心点
    //     lastCenter[1] + params.dy / 2 / lastZoom
    //   ]
    //   myOption.geo.center = newCenter
    // }
    // console.log(" myOption.geo", myOption.geo);

    // myChart.setOption(myOption)
  })

}

const clickFn = () => {
  myChart.off('click');
  myChart.on('click', function (params) {
    showRef.value = true
    nextTick(() => {
      const boxDom = document.querySelector('#showBox');
      console.log("params", params);
      const keys = params.data
      const content = getShowTooltipData(keys);
      console.log("content", content);
      boxDom.innerHTML = content
      function getShowTooltipData(paramData) {
        // 定义要排除的字段
        const excludeKeys = ['value', 'itemStyle']
        const dataInfo = paramData
        // 获取弹窗内容
        const popupContent = getPopupContent(dataInfo, excludeKeys)
        return popupContent

        // 生成弹窗内容
        function getPopupContent(data, excludeKeys) {
          let popupContent = ''
          for (let key in data) {
            if (!excludeKeys.includes(key)) {
              popupContent += `<div style="display: ${data[key] !== undefined ? 'block' : 'none'}">${data[key]
                }</div>`
              // popupContent += `<div>${key}: ${data[key]}</div>`;
            }
          }
          return popupContent.trim()
        }
      }
      // boxDom?.innerHTML = content
      // if (params.seriesType === "map") {
      console.log("区块点击");
      fixingPositon()
      // }
      function fixingPositon() {
        const e = event || window.event,
          top = e.clientY, left = e.clientX;
        const offsetX = boxDom.clientWidth;
        const offsetY = boxDom.clientHeight;
        boxDom.style.top = `${top - offsetY - 25}px`;
        boxDom.style.left = `${left + offsetX / 3}px`;
      }
    })


  })
}

onMounted(() => {
  init();
});
</script>

<style scoped>
.mapContainer {
  width: 1200px;
  height: 800px;
  border: 0.0625rem solid #000;
}

.showBox {
  width: fit-content;
  height: fit-content;
  padding: 10px 20px;
  border-radius: 20px;
  background: rgb(48, 158, 184);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  position: absolute;
}
</style>
